<!--
 * @Description: 
 * @Version: 1.0
 * @Author: yzq
 * @Date: 2025-04-16 14:14:50
 * @FilePath: \web\src\views\system\dataDictionary\detail.vue
 * @LastEditors: yzq
 * @LastEditTime: 2025-05-29 16:22:42
-->
<template>
  <div>
    <pro-table
      ref="tableRef"
      :data="dictionaryDetails"
      :columns="columns"
      :total="total"
      :tool-button="false"
      @search="commEvent.onSearch"
      :page-change="commEvent.onPageChange"
    >
      <template #tableHeader>
        <el-row justify="end">
          <el-button type="primary" icon="Plus" @click="commEvent.onAdd">新增</el-button>
        </el-row>
      </template>
      <template #dictType="{ row }">
        <el-button link type="primary" @click="commEvent.onDictType(row)">{{ row.dictType }}</el-button>
      </template>
      <template #operation="{ row }">
        <el-button link type="primary" @click="commEvent.onEdit(row)">编辑</el-button>
        <el-button link type="danger" @click="commEvent.onDel(row)">删除</el-button>
      </template>
    </pro-table>
    <!-- 新增/编辑弹窗 -->
    <save-dictionary-detail
      v-model:show="saveVisible"
      :current-dictionary-detail="currentDictionaryDetail"
      :dict-type="dictType"
      @refresh="commEvent.onSearch"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, h, onMounted, ref } from "vue"
import ProTable from "@/components/ProTable/index.vue"
import SaveDictionaryDetail from "./components/SaveDictionaryDetail.vue"
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"
import { ElMessage, ElMessageBox } from "element-plus"
import { useRoute, useRouter } from "vue-router"
import { dataDictionaryDetailPage, deleteDataDictionaryDetail, dataDictionaryList } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"

// 参数
const route = useRoute()
const router = useRouter()
const tableRef = ref<ProTableInstance>() // 表格实例
const dictionaryDetails = ref<SystemSpace.DataDictionaryDetailPage[]>([]) // 字典详情数据
const saveVisible = ref<boolean>(false) // 新增/编辑弹窗
const currentDictionaryDetail = ref<SystemSpace.DataDictionaryDetailPage>() // 当前字典详情数据
const total = ref<number>(0) // 总条数
const dictTypeEnum = ref<any[]>([]) // 字典类型
// 分页参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 表格项
const columns: ColumnProps<SystemSpace.DataDictionaryDetailPage>[] = [
  {
    prop: "sort",
    label: "序号",
    width: 80,
    render: scope => h("span", scope.$index + 1 + (pageParams.value.pageIndex - 1) * pageParams.value.pageSize)
  },
  {
    prop: "dictType",
    label: "字典名称",
    isShow: false,
    enum: dictTypeEnum,
    search: { el: "select", defaultValue: route.query.dictType as string }
  },
  { prop: "dictLabel", label: "数据名称", width: 220, search: { el: "input" } },
  { prop: "dictValue", label: "数据键值", width: 220 },
  { prop: "dictSort", label: "排序", width: 120 },
  {
    prop: "status",
    label: "状态",
    enum: [
      { label: "正常", value: 0 },
      { label: "停用", value: 1 }
    ],
    search: { el: "select" }
  },
  { prop: "remark", label: "备注", width: 300 },
  { prop: "operation", label: "操作", width: 140, fixed: "right" }
]
// 事件集合
const commEvent = {
  // 获取字段数据
  getDictionaryPageList: async (params: SystemSpace.DataDictionaryDetailPageQuery) => {
    const { data } = await dataDictionaryDetailPage(params)
    dictionaryDetails.value = data.result
    total.value = data.totalCount
  },
  // 查询
  onSearch: () => {
    pageParams.value.pageIndex = 1
    const _search = tableRef.value?.searchParam
    commEvent.getDictionaryPageList({ ...pageParams.value, ..._search })
  },
  // 分页
  onPageChange: (page: number, size: number) => {
    pageParams.value.pageIndex = page
    pageParams.value.pageSize = size
    const _search = tableRef.value?.searchParam
    commEvent.getDictionaryPageList({ ...pageParams.value, ..._search })
  },
  // 获取字典类型
  getDictType: async () => {
    const { data } = await dataDictionaryList()
    dictTypeEnum.value = data.map(item => ({ label: item.dictName, value: item.dictType }))
  },
  // 字典类型
  onDictType: (row: SystemSpace.DataDictionaryDetailPage) => {
    router.push(`/system/dataDictionary/detail?dictType=${row.dictType}`)
  },
  // 新增
  onAdd: () => {
    currentDictionaryDetail.value = undefined
    saveVisible.value = true
  },
  // 编辑
  onEdit: (row: SystemSpace.DataDictionaryDetailPage) => {
    currentDictionaryDetail.value = row
    saveVisible.value = true
  },
  // 删除
  onDel: (row: SystemSpace.DataDictionaryDetailPage) => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(async () => {
        const res = await deleteDataDictionaryDetail(row.dictCode)
        if (res.code === "200") {
          ElMessage.success("删除成功")
          commEvent.onSearch()
        }
      })
      .catch(() => {})
  }
}
const dictType = computed(() => route.query.dictType as string)
// 生命周期
onMounted(() => {
  commEvent.getDictType()
  commEvent.onSearch()
})
</script>

<style lang="scss" scoped></style>
